import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Card, Radio, Tabs, Popup } from 'react-vant';
import { Sign, Plus } from '@react-vant/icons';
import Tabs1 from './Tabs1';
import Tabs2 from './Tabs2';
function Leave() {
    const [leaveType, setLeaveType] = useState("");  // Step 1: State for selected leave type

    const [message, setMessage] = useState('');
    const handleReceiveMessage = (msg) => {
        setMessage(msg);
        console.log(msg);
        console.log(message);

        console.log(typeof message);

    }




    const handleRadioChange = (value) => {
        setLeaveType(value);  // Update the selected leave type
        console.log(value);    // Log the selected value to console

    };


    const items = ['按天', '按小时']
    const [team, setTeam] = useState([]);
    const [visible, setVisible] = useState(false);
    const getTeam = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/leave');
        setTeam(res.data);
    };

    useEffect(() => {
        getTeam();
        const interval = setInterval(() => {
            getTeam(); // 定期获取数据  
        }, 100); // 每5秒请求一次数据，您可以根据需要调整时间  

        return () => clearInterval(interval); // 清除定时器  
    }, []);

    const calculateDaysBetween = (startDate, endDate) => {
        const date1 = new Date(startDate);
        const date2 = new Date(endDate);

        const timeDiff = date2 - date1;
        const daysDiff = timeDiff / (1000 * 60 * 60 * 24);

        return daysDiff >= 0 ? daysDiff + 1 : 0;
    };

    return (
        <>
            <div style={{ position: "relative" }}>

                {team.map((item) => {
                    const leaveDays = calculateDaysBetween(item.shijian1, item.shijian2);

                    return (
                        <Card round key={item.id} style={{ margin: '20px 0px', position: 'relative' }}>
                            <Card.Body>请假类型</Card.Body>
                            <Card.Header>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <div style={{ width: "10px", height: '10px', backgroundColor: "red", borderRadius: '50%' }} />
                                    <div>&nbsp;&nbsp;{item.name}</div>
                                </div>
                            </Card.Header>
                            <Card.Body style={{ marginTop: '10px' }}>请假类型</Card.Body>

                            <div
                                style={{
                                    width: "66px",
                                    textAlign: "center",
                                    lineHeight: '30px',
                                    height: '30px',
                                    backgroundColor: item.state === "已批准" ? "rgb(253, 199, 72)" : "rgb(0, 208, 151)",
                                    position: 'absolute',
                                    right: '20px',
                                    top: '20px',
                                    borderRadius: '10px',
                                    color: "white"
                                }}>
                                {item.state}
                            </div>
                            <Card.Body style={{ margin: '15px 0px', display: 'flex', alignItems: 'center', position: 'relative' }}>
                                <Sign fontSize={'23px'} />
                                <span>{item.shijian1} 至 {item.shijian2}</span>
                                <div style={{ position: 'absolute', right: '20px', bottom: '10px', backgroundColor: 'rgb(244, 249, 253)', width: "35px", height: '31px', borderRadius: '8px', padding: '0 5px', textAlign: 'center', lineHeight: "31px" }}>
                                    {leaveDays}d
                                </div>
                            </Card.Body>
                        </Card>
                    );
                })}
                <div style={{ width: '56px', height: '56px', backgroundColor: 'rgb(63, 140, 255)', position: 'fixed', right: '5px', bottom: '50px', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Plus onClick={() => setVisible(true)} />
                </div>
                {/* 弹出层 */}
                <Popup visible={visible} onClose={() => setVisible(false)} style={{ borderRadius: '15px' }} closeable>
                    <div style={{ width: "320px", height: "600px" }}>
                        <Card round style={{ overflow: 'auto' }}>
                            <Card.Header>我要请假</Card.Header>
                            <Card.Body>
                                <p>请假类型</p>
                                <Radio.Group
                                    defaultValue="1"
                                    style={{ marginBottom: '15px' }}
                                    onChange={handleRadioChange}

                                >
                                    <Radio name="带薪休假" style={{ marginTop: '15px' }}>带薪休假</Radio>
                                    <Radio name="病假" style={{ marginTop: '15px' }}>病假</Radio>
                                    <Radio name="远程办公" style={{ marginTop: '15px' }}>远程办公</Radio>
                                </Radio.Group>
                                <Tabs border type='capsule' >
                                    {items.map(item => (
                                        //弹出层内部tab切换
                                        <Tabs.TabPane key={item} title={item}>
                                            <div>
                                                {item === "按天" && (
                                                    // 弹框上的单选
                                                    <Tabs1 leaveType={leaveType} onSendMessage={handleReceiveMessage} />

                                                )}
                                                {item === "按小时" && (
                                                    <Tabs2 leaveType={leaveType} />
                                                )}
                                            </div>
                                        </Tabs.TabPane>
                                    ))}
                                </Tabs>
                            </Card.Body>
                        </Card>
                    </div>
                </Popup>
            </div>
        </>
    );
}

export default Leave;